<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>名称：{{item.title}}</b>
                ---------------
                <b>价格：{{item.price}}</b>
                ---------------
                <b>库存：{{item.inventory}}</b>
                <button :disabled="item.inventory===0" @click="addCatr(item)">加入购物车</button>
            </li>
        </ul>
        
    </fieldset>
</template>
<script>
import {mapActions,mapState} from "vuex"
 export default {
    methods:{
        addCatr(current){
            console.log (current)
            this.ADD_CATR(current)
            
        },
        ...mapActions('product',['FH_PT']),
        ...mapActions('catr',['ADD_CATR'])
    },
    computed:{
        ...mapState('product',['productData'])
    },
    mounted(){
        this.FH_PT()
    }
 }

</script>    